<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: #cc2300;
            margin-left:8%;
            /*display:none;*/
        }
        .row span{
            width:8%;
            float:left;
        }
        .btn{
            margin-left:8%;
        }
    </style>
</head>
<body>
    <form name="myForm" ng-controller="form" ng-submit="submit()" novalidate>
        <div class="row">
            <pre>合法：{{ myForm.username.$valid }}</pre>
            <span>用户名:</span>
            <input type="text" name="username" ng-model="userData.userName" ng-minlength="4" ng-maxlength="6" required>
            <div class="error" ng-show="myForm.username.$error.required && myForm.username.$touched">用户名不能为空</div>
            <div class="error" ng-show="(myForm.username.$error.minlength || myForm.username.$error.maxlength) && myForm.username.$touched">用户名长度不对</div>
        </div>
        <div class="row">
            <span>密码:</span>
            <input type="password" name="password" ng-model="userData.userPwd" ng-minlength="6" required>
            <div class="error" ng-show="myForm.password.$error.required && myForm.password.$touched">密码不能为空</div>
            <div class="error" ng-show="myForm.password.$error.minlength && myForm.password.$touched">密码长度不能少于6位</div>
        </div>
        <div class="row">
            <span>确认密码:</span>
            <input type="password" name="password2" ng-model="userData.userPwd2" compare="userData.userPwd" required>
            <div class="error" ng-show="myForm.password2.$error.required && myForm.password2.$touched">确认密码不能为空</div>
            <div class="error" ng-show="myForm.password2.$error.compare && myForm.password2.$touched">密码不一致</div>
        </div>
        <button class="btn">提交</button>
    </form>

    <script src="js/angular.js"></script>
    <script src="js/formValidation.js"></script>
</body>
</html>